<template>
    <div>
        <Drawer title="工序配置" :before-close="handleClose" :closable="false" v-model="drawerVisible" width="80%"
            class="drawerStyle">

            <div class="tableContent">
                <Button type="primary" @click="handleAddRow">新增</Button>
                <Table :data="planList" style="width: 100%">
                    <TableColumn prop="procedureName" label="工序名称"></TableColumn>
                    <TableColumn prop="description" label="描述"></TableColumn>
                    <TableColumn label="操作" width="220">
                        <template slot-scope="{ row }">
                            <Button type="text" @click="handleEditRow(row, true)">资源配置</Button>
                            <Button type="text" @click="handleEditRow(row)">编辑</Button>
                            <Button type="text" @click="handleDeleteRow(row)">删除</Button>
                        </template>
                    </TableColumn>
                </Table>
                <div class="pageWrap mt16">
                    <pageLeftTitle :total="processTotal" />
                    <Page :total="processTotal" :page-size="queryPage.pageSize" :current="queryPage.current"
                        @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer />
                </div>
            </div>
            <Drawer title="Two-level Drawer" :closable="false" class="drawerZIndex" v-model="modalVisibleProcess"
                :z-index=12000>
                This is two-level drawer.
            </Drawer>
        </Drawer>
        <commonModal ref="commonModal"></commonModal>
        <RouterModal :visible="modalVisible" :form="form" :title="title" :handleAddSubmit="handleAddSubmit"
            :closeModal="closeModal" />
    </div>
</template>

<script>
import { Table, TableColumn, Button, Popconfirm } from 'element-ui';
import { editProductionPlanDetailApi, addProductionPlanDetailApi, deleteProductionPlanDetailApi,allRouteApi ,productAllApi} from '@/api/production/planDetail';
import RouterModal from './components/routerModal';
import commonModal from '@/components/modalTypes/commonModal.vue';

export default {
    name: "DrawerProcess",
    components: {
        commonModal,

        Table,
        TableColumn,
        Button,
        RouterModal,
        Popconfirm
    },
    props: {
        drawerVisible: Boolean,
        drawerClose: Function,
        currentItem: Object,
        planList: Array,
        processTotal: Number,
        planDetail: Function,
    },
    data() {
        return {
            queryPage: { current: 1, pageSize: 10 },
            modalVisible: false,
            form: {},
            title: '',
            modalVisibleProcess: false,
            productAll:[],
            routerAll:[]

        };
    },
    watch: {
        async drawerVisible(newValue, oldValue) {
            if (newValue) {
             this.featAll()
          

            }
        }},
        methods: {
            featAll(){
                // productAllApi().then(res=>{
                //  this.productAll
                // })
            },
            closeModal() {
                this.modalVisible = false
            },
            changePageNum(val) {
                this.queryPage.current = val;
                this.planDetail({
                    productionPlanId: this.currentItem.id,
                    ...this.queryPage,
                })
            },

            changePageSize(val) {
                this.queryPage.pageSize = val;
                this.planDetail({
                    productionPlanId: this.currentItem.id,
                    ...this.queryPage,
                })
            },
            handleAddSubmit() {
                const url = this.form.id ? editProductionPlanDetailApi : addProductionPlanDetailApi;
                const query = {
                    ...this.form,
                    productionPlanId: this.currentItem.id,
                }
                url(query).then(res => {
                    this.$Message.success(res.message);

                    this.modalVisible = false;
                    this.planDetail({
                        productionPlanId: this.currentItem.id,
                        ...this.queryPage,
                    })
                })
                    .catch(error => {
                        console.error('Error submitting form:', error);

                    });
            },
            handleClose(done) {
                this.drawerClose();

            },
            handleAddRow() {
                this.title = '新增工序';
                this.form = {};
                this.modalVisible = true
            },
            handleEditRow(row, flag) {
                if (flag) {
                    this.modalVisibleProcess = true;
                    return
                }
                this.modalVisible = true;
                this.form = { ...row };
                this.title = '编辑工序';
            },
            handleDeleteRow(row) {
                this.$refs.commonModal.showModal({
                    title: '删除提醒',
                    type: 'warn',
                    desc: '是否确认删除？',
                    submit: () => {
                        deleteProductionPlanDetailApi({ ids: [row.id] }).then(res => {
                            if (res.code === 200) {
                                this.$Message.success(res.message);
                                this.planDetail({
                                    productionPlanId: this.currentItem.id,
                                    ...this.queryPage,
                                })
                            } else {
                                this.$Message.warning(res.message);
                            }
                        });

                    },
                });

            }
        }
    }
</script>

<style lang="scss" scoped>
.operationBtn {
    cursor: pointer;
    margin-right: 10px;
}

.tableContent {
    padding: 25px;
}


.drawerZIndex {
    ::v-deep.ivu-drawer-wrap {
        z-index: 12000 !important;
    }

    ::v-deep.ivu-drawer-mask {
        z-index: 11000 !important;
    }


}
</style>